﻿<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link href="css/bootstrap.css" rel="stylesheet" />
    <style>
        .loader {
            display: none;
        }

        .main {
            margin-top: 65px;
        }

        html, body {
            background: #eee;
        }

        .main-2 {
            padding: 10px;
        }

        .table-head {
            font-weight: bold;
        }
        .graphic-item {
            border: 1px solid #CFCFCF;
            padding: 10px;
            margin: 10px;
            border-radius: 5px;
            font-weight: bold;
            text-align: center;
            background: #FAFAFA;
            cursor: pointer;
        }

            .graphic-item > span:after {
                content: " Подробнее";
                cursor: pointer;
                text-decoration: underline;
                margin-left: 5px;
                font-size: 10px;
            }
    </style>

</head>
<body>
    <nav class="navbar navbar-default navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">LOOK</a>
            </div>
            <div id="navbar" class="navbar-collapse collapse" aria-expanded="false" style="height: 1px;">
                <ul class="nav navbar-nav">
                    <li>
                        <a href="profile.html">Профиль</a>
                    </li>
                    <li>
                        <a href="graphic.html">График работы</a>
                    </li>
                    <li class="active">
                        <a href="usersList.html">Список сотрудников</a>
                    </li>
                </ul>
            </div><!--/.nav-collapse -->
        </div>
    </nav>
    <div class="container main">
        <div class="jumborton">
            <div class="panel panel-primary">
                <div class="panel-body">
                    <div>
                        Список пользователей
                    </div>
                    <div class="row main-2" id="users">

                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="scripts/jquery-1.9.1.js"></script>
    <script src="scripts/bootstrap.min.js"></script>
    <script>
        $(document).ready(function () {
            var baseUrl = localStorage.getItem("baseUrl");
            var login = localStorage.getItem("userLogin");
            $.ajax({
                url: baseUrl + "api/usersapi",
                data: { userLogin: login },
                type: "GET",
                error: function () {
                    alert("Ошибка получения данных с сервера.");
                },
                success: function (response) {
                    if (!response) {
                        return;
                    } else {
                        fillItems(response);
                    }
                }
            })

            function fillItems(response) {
                var container = $("#users");
                for (var i = 0; i < response.length; i++) {

                    var info = response[i].lastName + " " + response[i].name + " " + response[i].middleName; //day + "." + month + "." + response[i].year + " (" + response[i].title + ")";
                    var div = $("<div />", {
                        "class": "graphic-item",
                        onclick: "openDetails(" + response[i].id + ")",
                    }).append($("<span />", {
                    }).text(info));

                    container.append(div);
                }
            }

            function getDateItem(item) {
                var stringItem = "";
                if (item <= 9) {
                    stringItem = "0" + item;
                } else {
                    stringItem = item
                }
                return stringItem;
            }
        })

        function openDetails(idUser) {
            localStorage.setItem("currentId", idUser);
            window.location = "currentGraphic.html";
        }
    </script>
</body>
</html>